<!DOCTYPE html>

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Index</title>
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<body>
<div id="app">
    <!--搜索表单-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">

        <el-form-item label="当前状态">
            <el-select v-model="brand.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业名称">
            <el-input v-model="brand.company_name" placeholder="企业名称"></el-input>
        </el-form-item>

        <el-form-item label="品牌名称">
            <el-input v-model="brand.brand_name" placeholder="品牌名称"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>

    </el-form>
    <!--按钮-->

    <el-row>

        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>

    </el-row>
    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
    >

        <el-form ref="form" :model="parmasbrand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="parmasbrand.brand_name"></el-input>
            </el-form-item>

            <el-form-item label="企业名称">
                <el-input v-model="parmasbrand.company_name"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="parmasbrand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="备注">
                <el-input type="textarea" v-model="parmasbrand.description"></el-input>
            </el-form-item>

            <el-form-item label="状态">
                <el-switch v-model="parmasbrand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

    <template>
        <!--表格-->
        <template>
            <el-table
                    :data="pageData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>

                <el-table-column
                        prop="brand_name"
                        label="品牌名称"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="company_name"
                        label="企业名称"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="ordered"
                        align="center"
                        label="排序">
                </el-table-column>
                <el-table-column
                        prop="status"
                        align="center"
                        label="当前状态">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" plain @click="updateById(scope.$index, scope.row)">修改</el-button>
                        <el-button type="danger" plain @click="deleteById(scope.$index, scope.row)">删除</el-button>
                        <!--修改数据的对话框表单-->
                        <el-dialog
                                title="修改品牌信息"
                                :visible.sync="centerVisible"
                                width="30%"
                        >
                            <el-form ref="form" :model=" updatebrand" label-width="80px">
                                <el-form-item label="品牌名称">
                                    <el-input v-model=" updatebrand.brand_name"></el-input>
                                </el-form-item>
                                <el-form-item label="企业名称">
                                    <el-input v-model=" updatebrand.company_name"></el-input>
                                </el-form-item>
                                <el-form-item label="排序">
                                    <el-input v-model=" updatebrand.ordered"></el-input>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input type="textarea" v-model=" updatebrand.description"></el-input>
                                </el-form-item>
                                <el-form-item label="状态">
                                    <el-switch v-model=" updatebrand.status"
                                               active-text="启用"
                                               inactive-text="禁用"
                                               active-value="1"
                                               inactive-value="0">
                                    </el-switch>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="edit">提交</el-button>
                                    <el-button @click="centerVisible = false">取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>

                    </template>

                </el-table-column>
            </el-table>
        </template>

    </template>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageTotal">
    </el-pagination>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios.js"></script>
<script>
    new Vue({
        el: '#app',
        created() {
            this.fetchData()
        },
        data() {
            return {
                brand: {company_name: '', brand_name: ''},
                selectedIds: [],
                multi: [],
                parmasbrand: {brand_name: '', company_name: '', description: '', ordered: '', status: ''},
                updatebrand: {id: '', brand_name: '', company_name: '', description: '', ordered: '', status: ''},
                dialogVisible: false,
                centerVisible: false,
                // 总的数据
                tableData: [],
                // 分页的数据
                pageData: [],
                // 总数据量 默认为 0
                pageTotal: 0,
                // 当前页 默认是第一页
                currentPage: 1,
                // 每页大小 默认每页5条数据
                pageSize: 5,
            }
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 改变每页大小的回调
            handleSizeChange(val) {
                this.pageSize = val

                this.pageData = this.queryByPage()
            },
            // 改变当前页的回调
            handleCurrentChange(val) {
                this.currentPage = val

                this.pageData = this.queryByPage()
            },
            // 查询分页数据
            async fetchData() {
                const {data} = await axios.get('http://localhost:8080/brand')

                this.tableData = data.data
                this.pageTotal = data.data.length

                this.pageData = this.queryByPage()
            },
            // 实现分页的方法
            queryByPage() {
                // 起始位置 = (当前页 - 1) x 每页的大小
                const start = (this.currentPage - 1) * this.pageSize
                // 结束位置 = 当前页 x 每页的大小
                const end = this.currentPage * this.pageSize

                return this.tableData.slice(start, end)
            },
            //onsubmit
            async onSubmit() {
                var parmas = new URLSearchParams();
                const _this = this
                parmas.append("brand_name", this.brand.brand_name)
                parmas.append("company_name", this.brand.company_name)
                await axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: "http://localhost:8080/brand/selectBrand",
                    data: parmas,
                    method: "post",
                }).then(function (response) {
                    console.log(response)
                    _this.tableData = response.data.data
                    _this.pageTotal = response.data.data.length
                    _this.pageData = _this.queryByPage()
                }).catch(function (error) {
                    console.log(error)
                })
            },
            updateById(index, row) {
                console.log(index, row.id)
                this.updatebrand.id = row.id
                this.centerVisible = true
            },
            deleteById(index, row) {
                console.log(index, row.id)
                var _this = this
                var parmas = new URLSearchParams()
                parmas.append("id", row.id)
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: "http://localhost:8080/brand",
                    data: parmas,
                    method: 'delete',
                }).then(function (response) {
                    console.log(response)
                    _this.fetchData()
                }).catch(function (error) {
                    console.log(error)
                })
            },
            edit() {
                var _this = this
                var parmas = new URLSearchParams()
                parmas.append("id", this.updatebrand.id)
                parmas.append("brand_name", this.updatebrand.brand_name)
                parmas.append("company_name", this.updatebrand.company_name)
                parmas.append("ordered", this.updatebrand.ordered)
                parmas.append("description", this.updatebrand.description)
                parmas.append("status", this.updatebrand.status)
                console.log(this.updatebrand)
                this.centerVisible = false
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: "http://localhost:8080/brand",
                    data: parmas,
                    method: 'put',
                }).then(function (response) {
                    console.log(response)
                    _this.fetchData()
                }).catch(function (error) {
                    console.log(error)
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                this.multi = val
            },
            // 批量删除
            deleteByIds() {
                // 弹出确认提示框
                this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //用户点击确认按钮
                    //1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可
                    for (var i = 0; i < this.multi.length; i++) {
                        let element = this.multi[i]
                        this.selectedIds[i] = element.id
                    }
                    //2. 发送AJAX请求
                    var _this = this;
                    var parmas = new URLSearchParams();
                    parmas.append("selectedIds", _this.selectedIds);
                    console.log(_this.selectedIds)
                    // 发送ajax请求，添加数据
                    axios({
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        method: "post",
                        url: "http://localhost:8080/brand/deleteByIds",
                        data: parmas
                    }).then(function (resp) {
                        if (resp.data.data.code === 20021) {
                            //删除成功
                            // 重新查询数据
                            _this.fetchData();
                            // 弹出消息提示
                            _this.$message({
                                message: resp.data.data.msg,
                                type: 'success'
                            });
                        }
                        console.log(resp)
                        _this.fetchData()
                    })
                }).catch(() => {
                    //用户点击取消按钮
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            addBrand() {
                var _this = this
                console.log(this.parmasbrand)
                this.dialogVisible = false
                var params = new URLSearchParams()
                params.append("brand_name", this.parmasbrand.brand_name)
                params.append("company_name", this.parmasbrand.company_name)
                params.append("ordered", this.parmasbrand.ordered)
                params.append("description", this.parmasbrand.description)
                params.append("status", this.parmasbrand.status)
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    url: "http://localhost:8080/brand",
                    data: params,
                    method: 'post'
                }).then(function (response) {
                    console.log(response)
                    _this.fetchData()
                }).catch(function (error) {
                    console.log(error)
                })
            },
        }
    })
</script>
</html>